<template>
  <div>
    <img alt="验证码图片" title="看不清？点击换一个" :src="imgUrl" @click="GetValidateCode" />
  </div>
</template>

<script>
export default {
  name: "ValidateCode",
  data() {
    return {
      imgUrl: "",
      timestamp:''
    };
  },
  methods: {
    GetValidateCode() {
      //console.log(this.timestamp);
      this.$axios({
        method: "get",
        url: "/api/Login/GetValidateCode",
        params: {
          timestamp: this.timestamp
        },
        responseType: "arraybuffer"
      }).then(response => {
        //console.log(response);
        this.imgUrl =
          "data:image/png;base64," +
          btoa(
            new Uint8Array(response.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ""
            )
          );
        //console.log(this.imgUrl);
      });
    }
  },
  // mounted() {
  //   this.GetValidateCode();
  // },
  watch: {
    "$store.state.timestamp": {
      handler(val) {
        this.timestamp=val;
        this.GetValidateCode();
      }
    }
  }
  // computed:{
  //   timestamp(){
  //     return this.$store.state.timestamp;
  //   }
  // }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
